<script setup lang="ts">
import cssTools from "@/utils/cssTools";

const props = defineProps({
  loading: {
    type: Boolean,
    required: false,
    default: false,
  },
  showData: {
    type: Array as PropType<any[]>,
    required: false,
    default: [],
  },
  enterEvent: {
    type: Function as () => void | Function,
    required: false,
  },
  forceOpen: {
    type: Boolean,
    required: false,
    default: false,
  },
  MainColor: {
    type: String,
    required: false,
    default: "rgb(198, 198, 198)",
  },
});

// input是否聚焦
const isInputFocused = ref<boolean>(false);

// 自定义事件
const emit = defineEmits(["isCardOpen", "isCardClose", "update:modelValue"]);

function handleInputFocus() {
  isInputFocused.value = true;
}

function handleInputBlur() {
  isInputFocused.value = false;
}

const handleUpdateModelValue = (value: any) => {
  emit("update:modelValue", value);
};

// 主背景颜色
const masterBackground = computed(() => {
  return cssTools.rgb2rgba(props.MainColor, 0.34);
});

// 监听本组件的下半部分是否展开
watch(
  () => [isInputFocused, props.loading],
  ([newFocused, newLoading]) => {
    if (newFocused || newLoading) {
      emit("isCardOpen");
    } else {
      emit("isCardClose");
    }
  },
  { deep: true }
);
</script>

<template>
  <div
    :class="{
      SkewXCard: true,
      'SkewXCard--active': isInputFocused || props.loading || props.forceOpen,
    }"
  >
    <div class="align">
      <span class="red"></span>
      <span class="yellow"></span>
      <span class="green"></span>
    </div>

    <!--    <h1>HOVER ME</h1>-->
    <div class="SkewXCard1">
      <MyInput2
        @update:model-value="handleUpdateModelValue"
        :enter-event="enterEvent"
        :loading="props.loading"
        :mi3Class="'testInput'"
        v-bind="$attrs"
        @input-focus="handleInputFocus"
        @input-blur="handleInputBlur"
      />
    </div>
    <div class="SkewXCard2">
      <CustomTable1 :show-data="props.showData" :loading="props.loading" />
    </div>
  </div>
</template>

<style scoped>
.SkewXCard {
  width: 90%;
  height: 95px;
  /*padding: 0.5rem;*/
  /*background: rgba(198, 198, 198, 0.34);*/
  background: v-bind(masterBackground);
  border-radius: 8px;
  backdrop-filter: blur(5px);
  border-bottom: 3px solid rgba(255, 255, 255, 0.44);
  border-left: 2px rgba(255, 255, 255, 0.545) outset;
  box-shadow: -40px 50px 30px rgba(0, 0, 0, 0.28);
  transform: skewX(10deg);
  transition: 0.4s;
  overflow: hidden;
  color: white;
  margin: 0;
  box-sizing: border-box;
}

.SkewXCard * {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.SkewXCard--active {
  height: 254px;
  transform: skew(0deg);
}
/*
.SkewXCard:hover {
  height: 254px;
  transform: skew(0deg);
}
*/
.align {
  padding: 1rem;
  display: flex;
  flex-direction: row;
  gap: 5px;
  align-self: flex-start;
}

.red {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #ff605c;
  box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.28);
}

.yellow {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #ffbd44;
  box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.28);
}

.green {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #00ca4e;
  box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.28);
}

.SkewXCard h1 {
  text-align: center;
  margin: 1.3rem;
  color: rgb(218, 244, 237);
  text-shadow: -10px 5px 10px rgba(0, 0, 0, 0.573);
  background: red;
}

.SkewXCard2 {
  display: flex;
  align-content: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin-top: 10px;
  flex-grow: 1;
}
</style>
